<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>条件渲染</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>当前值为{{number}}</h2>
        <button @click="number++">点击n的值加1</button>
        <!-- v-show条件渲染，用布尔值判断 -->
        <!-- <h2 v-show="false">{{name}}</h2> -->
        <!-- <h2 v-show="1===1">{{name}}</h2> -->

        <!-- 使用v-if条件渲染 -->
        <!-- <h2 v-if="false">{{name}}</h2> -->
        <!-- <h2 v-if="1===1">{{name}}</h2> -->


        <!-- v-else和v-else-if -->
        <div v-if="number===1">Angular</div>
        <div v-else-if="number===2">React</div>
        <div v-else-if="number===3">Vue</div>
        <div v-else>hahhahahah</div>


        <!-- v-if与template的配合使用 -->
        <template v-if="number===1">
            <div>文字1</div>
            <div>文字2</div>
            <div>文字3</div>
        </template>
    </div>
    <script>

        /* 条件渲染
        v -if：
        适用于切换频率低的场景
        不展示的dom元素直接被移除
        v - if可以和v -else -if和v - else一起使用，但是结构不可以被打断

        v - show
        适用于切换频率较高的场景
        不展示的元素没有被移除，只是样式隐藏掉

        使用v - if元素不一定可以获取到，但使用v - show一定可以获取到 */

        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#root',
            data: {
                name: 'xiaoyao',
                number: 0
            },
            methods: {}
        });
    </script>
</body>

</html>